<!--
 * @Author: zny.yjw
 * @Date: 2022-03-31 15:14:32
 * @LastEditTime: 2022-03-31 15:14:43
 * @LastEditors: zny.yjw
 * @FilePath: \mapboxdemo\officialdemo.html
 * @Description: 
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Add a new layer below labels</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-88.137343, 35.137451],
            zoom: 4
        });

        map.on('load', () => {
            const layers = map.getStyle().layers;
            // Find the index of the first symbol layer in the map style.
            let firstSymbolId;
            for (const layer of layers) {
                if (layer.type === 'symbol') {
                    firstSymbolId = layer.id;
                    break;
                }
            }

            map.addSource('urban-areas', {
                'type': 'geojson',
                'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
            });
            map.addLayer({
                    'id': 'urban-areas-fill',
                    'type': 'fill',
                    'source': 'urban-areas',
                    'layout': {},
                    'paint': {
                        'fill-color': '#f08',
                        'fill-opacity': 0.4
                    }
                    // This is the important part of this example: the addLayer
                    // method takes 2 arguments: the layer as an object, and a string
                    // representing another layer's name. If the other layer
                    // exists in the style already, the new layer will be positioned
                    // right before that layer in the stack, making it possible to put
                    // 'overlays' anywhere in the layer stack.
                    // Insert the layer beneath the first symbol layer.
                },
                firstSymbolId
            );
        });
    </script>

</body>

</html>